<template>
  <view class="container">
    <image class="background-image" src="/static/draw/beijing.png" mode="aspectFill"></image>
    <!-- 其他页面内容 -->
    <view class="content">
		<view class="top-box">
			<view class="biaoti" style="background-image: url('https://cdn.xnh.wanhedashuju.com/uploads/20250217/eee9d7a346a23aca8e75ffc63c352678.png');background-size: 100% 100%;">
				<view class="" style="margin-top: 150rpx;margin-left: 30rpx; font-weight: bold;font-size: 32rpx;color: #FFFFFF;">
					普通用户抽奖，下一阶段会员抽奖
				</view>
			</view>
			<view @click="choujiang()" class="zhuti" style="background-image: url('https://cdn.xnh.wanhedashuju.com/uploads/20250217/554a318da547f4f0c53055c06436dc6b.png');background-size: 100% 100%;"></view>
			<view class="biaoti2" style="background-image: url('https://cdn.xnh.wanhedashuju.com/uploads/20250217/388a8f1c7f734387345f705c95449ad3.png');background-size: 100% 100%;display: flex;align-items: center;justify-content: center;">
				<view class="" style=" font-weight: bold;font-size: 32rpx;color: #FFFFFF;">
					{{ communityName }}第{{ period }}期
				</view>
			</view>
			<view class="dakuang" style="background-image: url('https://cdn.xnh.wanhedashuju.com/uploads/20250217/2731f1ef336482077e490863340525c4.png');background-size: 100% 100%;display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<view class="title" style="background-image: url('https://cdn.xnh.wanhedashuju.com/uploads/20250217/5c2af2485e4e681b7093d6f59980163e.png');background-size: 100% 100%;display: flex;align-items: center;justify-content: center;">
					<view class="" style=" font-weight: bold;font-size: 32rpx;color: #FFFFFF;display: flex;align-items: center;justify-content: center;">
						{{ isOpen === 0 ? '等待开奖' : '已开奖' }}
					</view>
				</view>
				<view class="" style="font-size: 24rpx;color: #323232;">
					本期奖品：{{ prizeName }}   份数：{{ prizeNum }}      开奖时间：{{ openTime }}
				</view>
				<view class="imagebox" style="width: 400rpx;height: 400rpx;">
					<image :src="goodsPic" style="width: 100%;height: 100%;" mode=""></image>
				</view>
				<view class="textbox">
					你当前状态 {{ isSignUp === 0 ? '未参加' : '已参加' }}
				</view>
			</view>
		</view>
    </view>
  </view>
</template>

<script>
	import * as index from '@/api/index.js'
export default {
	data() {
		return {
			communityId:'',
			locationCity: '',
			list: [],
			join: 0,
			isSearch: '',
			raffleId: '', // 抽奖活动id
			userId: '', // 用户id
			signUpNum: 0, // 参与人数
			period: '', // 抽奖第几期
			communityName: '', // 社区名称
			isOpen: 0, // 是否已开奖：0没开奖，1已开奖
			prizeName: '', // 奖品名称
			prizeNum: 0, // 奖品数量
			isSignUp: 0, // 0未报名1已报名
			goodsPic: '', // 奖品图片地址
			openTime: '', // 开奖时间
		}
	},
	onLoad(e) {
		this.communityId = uni.getStorageSync('communityId')
		this.userId = uni.getStorageSync('userinfo').userId; // 假设用户id存储在本地存储中
		this.xianshi();
	},
	onShow() {
		this.isSearch = uni.getStorageSync('isSearch')
	},
	methods: {
		// 参与抽奖
		choujiang(){
			index.signUp({ raffleId: this.raffleId, userId: this.userId }).then(res => {
				if (res.code === 0) {
					this.isSignUp = 1;
					uni.showToast({
						title: '参与成功',
						icon: 'success'
					});
				} else {
					uni.showToast({
						title: '参与失败',
						icon: 'none'
					});
				}
			}).catch(err => {
				console.error(err);
			});
		},
		// 抽奖页面显示数据
		xianshi() {
			index.signUpHouse({ userId: this.userId ,communityId:this.communityId}).then(res => {
				if (res.code === 0) {
					this.signUpNum = res.raffleVo.signUpNum;
					this.period = res.raffleVo.period;
					this.communityName = res.raffleVo.communityName;
					this.isOpen = res.raffleVo.isOpen;
					this.prizeName = res.raffleVo.prizeName;
					this.prizeNum = res.raffleVo.prizeNum;
					this.isSignUp = res.raffleVo.isSignUp;
					this.goodsPic = res.raffleVo.goodsPic;
					this.openTime = res.raffleVo.openTime;
					this.raffleId = res.raffleVo.raffleId;
				}
			}).catch(err => {
				console.error(err);
			});
		}
		
 	}
  // 页面逻辑
}
</script>

<style scoped lang="scss">
	.textbox {
		font-weight: bold;
		font-size: 27rpx;
		color: #323232;
	}
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  z-index: -1; /* 确保背景图在其他内容之下 */
}

.content {
  position: relative;
  z-index: 1;
  .top-box {
	  margin-top: 10rpx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	  .biaoti {
		  width: 539rpx;
		  height: 204rpx;
	  }
		  
	  .zhuti {
		 width: 720rpx;
		 height: 533rpx;
	  }
	  .biaoti2{
		  width: 491rpx;
		  height: 74rpx;
	  }
	  .dakuang {
		  width: 720rpx;
		  height: 597rpx;
		  .title {
			  width: 328rpx;
			  height: 68rpx;
		  }
	  }
  }
  /* 其他样式 */
}
</style>